<script setup>
import Headline from './components/Headline.vue'
import lunbo from './components/lunbo.vue'
</script>

<template>
  <div class="container">
    <div id="it">
      <Headline />
    </div>
    <div class="fragment-container">
      <div class="container1">
        <lunbo />
      </div>
      <div class="box">
        <div class="text">
          Hi，我是 Kimi～ 很高兴遇见你！你可以随时把网址🔗或者文件📃发给我，我来帮你看看
        </div>
        <img src="https://fscl01.fonpit.de/userfiles/7687254/image/nextpit_Apple_Vision_Pro_2023.jpg" alt="" class="responsive-img">
      </div>
      <br>
      <div class="box">
      <div class="text">
          Hi，我是 Kimi～ 很高兴遇见你！你可以随时把网址🔗或者文件📃发给我，我来帮你看看
        </div>
        <img src="https://fscl01.fonpit.de/userfiles/7687254/image/nextpit_Apple_Vision_Pro_2023.jpg" alt="" class="responsive-img">
      </div>
    </div>
  </div>
</template>

<style scoped>
#it {
  height: 100%;
  width: 100%;
}

.container {
  position: fixed;
  top: 1%;
  left: 0;
  width: 100%;
  padding-left: 10%;
  padding-right: 10%;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  overflow: hidden; /* 确保父容器不滚动 */
}

.scroll-container {
  overflow-y: scroll; /* 垂直滚动条 */
  height: calc(100vh - 20%); /* 让容器高度适应屏幕高度 */
}

.container1 {
  margin-top: 1%;
  margin-bottom: 3%;
}

.box {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  height: auto;
}

.text {
  font-weight: bold;
  margin-top: 1%;
  margin-bottom: 1%;
}

.responsive-img {
  max-width: 40%;
  margin-top: 20px;
  height: auto;
}
.fragment-container{
  height: 100vh;
  overflow-y: scroll;
  max-width: 100vw;
  margin: 0 auto;
}

</style>
